<template>
  <app-header></app-header>

  <div class="login-content">
    <div class="login-flex">
      <div class="login-left">
        <p>万民用户知心托付&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ productAvgRate }}%</span>历史年化收益</p>
        <p>千万级技术研发投入&nbsp;&nbsp;&nbsp;&nbsp;亿级注册资本平台 </p>
      </div>
      <!---->
      <div class="login-box">
        <h3 class="login-title">用户注册</h3>
        <form action="" id="register_Submit">
          <div class="alert-input">
            <input type="text" class="form-border user-num" name="mobile"
                   v-model="phone" @blur="checkPhone" placeholder="请输入11位手机号">
            <div class="input-err">{{ phoneErr }}</div>
            <p class="prompt_num"></p>
            <input type="password" placeholder="请输入6-20位英文和数字混合密码" class="form-border user-pass" v-model="secret"
                   @blur="checkSecret" autocomplete name="password">
            <div class="input-err">{{ secretErr }}</div>
            <p class="prompt_pass"></p>
            <div class="form-yzm form-border">
              <input class="yzm-write" type="text" name="" v-model="code" @blur="checkCode" placeholder="输入短信验证码">
              <input class="yzm-send" type="button" v-model="yzmText" id="yzmBtn" @click="sendSmsCode">
            </div>
            <div class="input-err">{{ codeErr }}</div>
            <p class="prompt_yan"></p>
          </div>
          <div class="alert-input-agree">
            <input type="checkbox" v-model="agree">我已阅读并同意<a href="javascript:;" target="_blank">《动力金融网注册服务协议》</a>
          </div>
          <div class="alert-input-btn">
            <input type="button" class="login-submit" @click="registerNewUser" value="注册">
          </div>
        </form>
        <div class="login-skip">
          已有账号？ <a href="/user/login">登录</a>
        </div>
      </div>

    </div>
  </div>


  <app-footer></app-footer>
</template>

<script>
import AppFooter from "@/components/AppFooter";
import AppHeader from "@/components/AppHeader";
import {doGet, doPost} from "@/utils/request";
import md5 from 'js-md5';

export default {
  name: "RegisterView",
  components: {AppFooter, AppHeader},
  data() {
    return {
      productAvgRate: 0,
      phone: '',
      phoneErr: '',
      secret: '',
      secretErr: '',
      code: '',
      codeErr: '',
      agree: false,
      //按钮上的文字倒计时
      yzmText: '获取验证码',
      leftTime: false,

    }
  },
  mounted() {
    //获取利率.
    this.getProductAvgRate();

  },
  methods: {
    getProductAvgRate() {
      doGet("/app/statics").then(resp => {
        if (resp.code === 999) {
          this.productAvgRate = resp.result.allBidMoney;
        }
      })
    },

    //手机号
    checkPhone() {
      if (this.phone === '') {
        this.phoneErr = "请输入手机号";
      } else if (this.phone.length != 11) {
        this.phoneErr = "手机号格式错误";
      } else if (!/^1[1-9]\d{9}$/.test(this.phone)) {
        this.phoneErr = "手机号格式错误";
      } else {
        this.phoneErr = '';
      }
    },
    //密码.
    checkSecret() {
      if (this.secret == '') {
        this.secretErr = '请输入密码';
      } else if (this.secret.length < 6 || this.secret.length > 20) {
        this.secretErr = '密码格式为6到20位';
      } else if (!/^(([a-zA-Z]+[0-9]+)|([0-9]+[a-zA-Z]+))[a-zA-Z0-9]*/.test(this.secret)) {
        this.secretErr = '密码应同时包含英文和数字';
      } else {
        this.secretErr = '';
      }
    },
    //验证码
    checkCode() {
      if (!this.code) {
        this.codeErr = '请输入验证码';
      } else if (this.code.length != 5) {
        this.codeErr = '请正确输入验证码';
      } else {
        this.codeErr = '';
      }
    },
    //注册
    registerNewUser() {
      if (!this.agree){
        alert("请先阅读注册服务协议!");
        return;
      }
      this.checkPhone();
      this.checkSecret();
      this.checkCode();
      if (this.phoneErr === '' && this.secretErr ==='' &&this.codeErr === ''){
        //注册用户,提交
        let parm={
          phone:this.phone,secret:md5(this.secret),code:this.code
        }
        doPost("/user/register",parm).then(resp=>{
          if (resp.code === 999){
            //注册成功,跳转到登录页面
            this.$router.push({path:'/user/login'})
          }
        })
      }

    },
    //验证码后端接口
    sendSmsCode() {
      if (this.leftTime) {
        return;
      }
      //检查手机号
      this.checkPhone();
      this.checkSecret();
      if (this.phoneErr !== ''&& this.secretErr !== '') {
        return;
      }
     this.leftTime = true;
      //倒计时
      let second = 59   //倒计时时长
      this.yzmText = second + "秒后可获取";
      let handler = setInterval(() => {
        if (second <= 1) {
          this.yzmText = '获取验证码';
          this.leftTime = false;
          window.clearInterval(handler); //关闭.
        } else {
          second = second - 1;
          this.yzmText = second + "秒后可获取";
        }

      }, 1000)

      //调用服务器接口
      doGet('/sms/reg', {phone: this.phone}).then(resp => {
        if (resp.code === 999) {
          alert("短信已发送,请注意查收");
        }
      })
    },
  }
}

</script>

<style scoped>

</style>